import React from 'react'
import { Link } from 'react-router-dom'
import { Tabs } from 'antd-mobile'
import { Getindexgoods, Getnew, Getseckill } from '../request/api'
import '../assets/css/home.css'
import '../assets/css/reset.css'




export default class Home extends React.Component {
    constructor() {
        super()
        this.state = { list: [], news: [], listson: [], skill: [] }
    }
    componentDidMount() {

        // 秒杀
        Getseckill().then(res => {
            console.log(res,'秒杀');
                this.setState({ skill: res.list }, () => {
                    console.log(this.state.news);
                })
        })

        // 新人专享
        Getnew().then(res => {
            console.log(res)
            this.setState({ news: res.list }, () => {
                    console.log(this.state.news);
                })
                //   console.log(this.setstate.news
        })
 
        // 首页渲染
        Getindexgoods().then(res => {
            console.log(res,'首页');
                this.setState({
                    list: res.list,
                    listson: res.list[0].content
                }, () => {
                    console.log(res);
                })
        })

    }
    fn(e) {
        console.log(e)
        this.setState({ listson: this.state.list[e].content })

    }

    render() {
        const { list, news, listson, skill } = this.state



        return (
            <div>

                <div id="page">
                   
                     <div className='top'>
                <img className='img' src={require('../assets/images/logo.png')} alt="" />
                <input type="text" placeholder='搜索'/>
                <img className='ding' src={require('../assets/images/icon_location.png')} alt="" />
            </div>
                    <div className='top_bottom'>
                        <div className='h1'>
                            <p>
                                新人专享
                                <span className='shijian'>42</span>:
                                <span className='shijian'>42</span>:
                                <span className='shijian'>42</span>
                                <span className='chakan'>查看全部</span>
                            </p>
                        </div>
                        {/* 一重礼 */}
                        <div className='boxxx1'>
                            <div className='qqqq'>
                                <div>限时秒杀</div>
                                <p>信任特价商品专区<span>(限量供应,先到先得)</span></p>
                            </div>
                            <ul>
                                {news.map(item => {
                                    return <li key={item.id}>
                                        <Link to='/xiang' state={{ id: item.id, name: item.goodsname, img: item.img }}>
                                            < img src={item.img} alt="" />
                                            <div>
                                                <div>
                                                    ￥{item.price}{" "}
                                                    <p>
                                                        <del>{item.market_price}</del>
                                                    </p >
                                                </div>
                                                {/* <span>图标</span> */}
                                            </div></Link>
                                    </li>
                                })}


                            </ul>
                        </div>
                        {/* 2重礼 */}
                        <div className='boxxx1'>
                            <div className='qqqq'>
                                <div>限时秒杀</div>
                                <p>信任特价商品专区<span>(限量供应,先到先得)</span></p>
                            </div>
                            <div className='ooo'>
                                <img className='tu1' src={require('../assets/images/优惠券@50.png')} alt="" />
                                <img className='tu2' src={require('../assets/images/优惠券领取@100.png')} alt="" />
                            </div>
                        </div>
                    </div>



                    {/* <!-- 第二块 --> */}
                    <div className="box2">
                        <div> <a href="#"><img src={require('../assets/images/miaosha.png')} alt="" /><p>限时秒杀</p> </a> </div>
                        <div><a href="#"> <img src={require('../assets/images/changxiao.png')} alt="" /><p>畅销商品</p> </a> </div>
                        <div><a href="#"> <img src={require('../assets/images/pinzhi.png')} alt="" /><p>品质大牌</p> </a> </div>
                        <div><a href="#"> <img src={require('../assets/images/jifen.png')} alt="" /><p>小u自营</p> </a> </div>
                        <div><a href="#"><img src={require('../assets/images/jifen.png')} alt="" /><p>积分商城</p> </a> </div>
                    </div>
                    {/* <!--推荐  --> */}
                    <div className='miao'>
                        <div className='qqq'>超级秒杀</div>
                        <div className="ww"><div>05</div><span>:</span> <div>20</div><span>:</span> <div>47</div></div>

                        <div className='mmm'>
                            < img src={require('../assets/images/p02.png')} alt="" />
                            <div className='zi'>
                                <div className='zhe'>9.7折</div>
                                <p>木樨园山茶花洁面</p>
                                <span>每人限购一件</span>
                                <div className='rrr'>$29.99 <span> <del>69.9</del></span><span className='li'>立抢</span></div>
                            </div>
                        </div>
                    </div>

                    {/* 一重礼 */}
                    <div className='boxxx1'>
                        <div className='qqqq'>
                            <div>限时秒杀</div>
                            <p>信任特价商品专区<span>(限量供应,先到先得)</span></p>
                        </div>
                        <ul>

                            {skill.map(item => {
                                return <li key={item.id}>
                                    <Link to='/index/detail' state={{ id: item.id, name: item.goodsname, img: item.img }}>
                                        < img src={item.img} alt="" />
                                        <div>
                                            <div>
                                                ￥{item.price}{" "}
                                                <p>
                                                    <del>{item.market_price}</del>
                                                </p >
                                            </div>

                                        </div></Link>
                                </li>
                            })}


                        </ul>
                    </div>
                    {/* <!-- 第三块 --> */}
                    <div className="box3">
                        <div className='shi'>
                            <p>双十一尖货预约</p>
                            <img src={require('../assets/images/11.png')} alt="" />
                        </div>

                        <div className='ccc'>
                            <p>畅购全球</p>
                            <img src={require('../assets/images/12.png')} alt="" />
                            <img src={require('../assets/images/13.png')} alt="" />
                        </div>
                    </div>
                    <div className='tui'>
                        <Tabs onChange={this.fn.bind(this)}>
                            <Tabs.Tab title='水果' key={0} >
                            </Tabs.Tab>
                            <Tabs.Tab title='果蔬' key={1} >
                            </Tabs.Tab>
                            <Tabs.Tab title='进口水果' key={2} >
                            </Tabs.Tab>
                            <Tabs.Tab title='调料' key={3} >
                            </Tabs.Tab>
                        </Tabs>
                        <div>
                            {listson.map(item => {
                                return <div className='mmmm' key={item.id}>
                                    <Link to='/index/detail' state={{ id: item.id, name: item.goodsname, img: item.img ,market_price:item.market_price,price:item.price,type:1}}>
                                        < img src={item.img} alt="" />
                                        <div className='zi'>
                                            <div className='zhe'>7.9折</div>
                                            <p>{item.goodsname}</p>
                                            <div className='jia'>
                                                <p>${item.price}</p>
                                                <span> <del>${item.market_price}</del> </span></div>
                                            <div className='rr'>加入购物车</div>
                                        </div></Link>
                                </div>
                            })}
                        </div>

                    </div>
                </div>

            </div>
        )
    }
}
